<template>
  <div class="user_list">
    <div class="top">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="value" :Popper-append-to-body="false">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="用户名称、ID、手机号、邮箱" v-model="input3" class="searchInput">
            <template #suffix>
              <i class="iconfont iconfangdajing" @click="search"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"> </el-table-column>
      <el-table-column align="center" label="编号" width="120">
        <template v-slot="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column align="center" prop="nickname" label="用户名称" width="120"> </el-table-column>
      <el-table-column align="center" prop="userId" label="用户ID" width="120" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column align="center" prop="phone" label="手机号" width="120"> </el-table-column>
      <el-table-column align="center" prop="email" label="邮箱" width="120" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column align="center" prop="company" label="关联商家" width="120"> </el-table-column>
      <el-table-column align="center" prop="logol" label="关联品牌" width="120"> </el-table-column>
      <el-table-column align="center" prop="store" label="关联门店" width="120"> </el-table-column>
      <el-table-column align="center" label="创建时间" :show-overflow-tooltip="true">
        <template v-slot="scope">
          {{ scope.row.creat_date }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="最近登录时间" :show-overflow-tooltip="true">
        <template v-slot="scope">
          {{ scope.row.loadTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ipAdd" sortable :show-overflow-tooltip="true" label="登录IP">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="120">
        <template v-slot="scope">
          <el-switch disabled v-model="scope.row.enable" @click="switchStaus(scope.row)" active-color="#fff"
            inactive-color="#f0f0f0" :class="{ 'switch-is-actived': scope.row.enable }"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120" fixed="right">
        <template #header>
          操作&emsp;
          <i class="el-icon-s-operation"></i>
        </template>
        <!-- <slot name="icon"> -->
        <template v-slot="scope">
          <!-- <i class="iconfont iconshezhi" @click="switchChange" v-if="scope.row.enable"></i> -->
          <!-- {{ scope.row.enable }} -->
          <!-- <i v-else-if="scope.row.enable === false" @click="jumpTips" class="jiejin">解禁</i> -->
          <!-- &emsp;
          <i class="iconfont iconxiangqing" @click="searchDetail"></i> -->
          <i class="iconfont iconxiangqing" @click="searchDetail(scope.row.userCode)"></i>
        </template>
        <!-- </slot> -->
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <PageNation :totalData="total" :currentPage="num" :pageSize="size" @getPageData="getPageList"
      @getPageDatas="getPageLists" />
    <!-- 模态框 -->
    <el-dialog title="用户详情" v-model="dialogVisible" width="50%" close-on-press-escape top="0"
      :close-on-click-modal="false" :before-close="handleClose">
      <div class="father">
        <div class="top">
          <el-image style="width: 100px; height: 100px;"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
          <div>
            <div>
              <span> 用户名称：{{ userDetailInfo.userName }} </span>
              <span>用户ID: {{ userDetailInfo.userCode }}</span>
              <span>最近登录时间:{{ userDetailInfo.lastLoginTime }}</span>
            </div>
            <div>
              <span>手机号:{{ userDetailInfo.phone}}</span>
              <span>邮箱:{{ userDetailInfo.email?userDetailInfo.email:'' }}</span>
              <span>登录IP:{{ userDetailInfo.lastLoginIp }}</span>
              <span>创建日期:{{ userDetailInfo.createTime }}</span>
            </div>
          </div>
        </div>
        <div class="first">
          <p>他的商家: {{ userDetailInfo.relationBusinessNum }}</p>
          <el-table :data="userDetailInfo.enterpriseBusinessList" style="width: 100%; border-radius: 10px;"
            max-height="130px" border>
            <el-table-column prop="enterpriseName" label="商家名称" width="180"> </el-table-column>
            <el-table-column prop="enterpriseCode" label="在职岗位" width="180"> </el-table-column>
            <el-table-column prop="createTime" label="关联日期"> </el-table-column>
          </el-table>
        </div>
        <div class="second">
          <p>他的品牌: {{ userDetailInfo.relationBrandNum }}</p>
          <el-table :data="userDetailInfo.enterpriseBrandList" style="width: 100%; border-radius: 10px;"
            max-height="130px" border>
            <el-table-column prop="enterpriseName" label="商家名称" width="180"> </el-table-column>
            <el-table-column prop="enterpriseCode" label="在职岗位" width="180"> </el-table-column>
            <el-table-column prop="createTime" label="关联日期"> </el-table-column>
          </el-table>
        </div>
        <div class="third">
          <p>他的门店: {{ userDetailInfo.relationStoreNum }}</p>
          <el-table :data="userDetailInfo.enterpriseStoreList" style="width: 100%; border-radius: 10px;"
            max-height="130px" border>
            <el-table-column prop="enterpriseName" label="商家名称" width="180"> </el-table-column>
            <el-table-column prop="enterpriseCode" label="在职岗位" width="180"> </el-table-column>
            <el-table-column prop="createTime" label="关联日期"> </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 用户禁用 -->
    <el-dialog title="用户禁用" v-model="enableDialog" width="50%" close-on-press-escape top="0"
      :close-on-click-modal="false">
      <div class="enableDia">
        <div><span>名称:</span>{{userForbiddenInfo.userName}}</div>
        <div><span>手机号:</span>{{userForbiddenInfo.phone}}</div>
        <div>
          <span>禁用设置:</span>
          <el-radio-group v-model="radio" @change="choose">
            <el-radio label="永久">永久</el-radio>
            <el-radio label="自定义时间">自定义时间</el-radio>
          </el-radio-group>
          <p v-show="isShow">用户将永久禁用,可在禁用状态下解除禁用</p>
          <p :class="{ red: tipShow }" v-show="tipShow">请设置禁用时间</p>
        </div>
        <div v-show="inputShow">
          <span>禁用天数:</span>
          <i>
            <input type="text" v-model="dayInput" />
            <b @click="shuru">3</b>天 <b @click="shuru">7</b>天 <b @click="shuru">15</b>天
          </i>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button plain size="mini" @click="enableDialog = false">取 消</el-button>
          <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 接触禁用 -->
    <popUp />
  </div>
</template>

<script>
// import StaffMgl from '@/components/StaffManagetList'
import PageNation from "@/components/Pagination/index";
// import popUp from '@/components/Popup/index'
// import Detail from './component/detaile.vue'

import { onMounted, reactive, toRefs } from "vue";
import {
  getPageData,
  getUserDetail,
  changeStatus,
} from "../../../../api/users.js";
import { ElMessage } from "element-plus";
export default {
  name: "user_list",
  components: { PageNation },
  methods: {
    jumpTips() {
      this.$confirm("确定解除该用户禁用状态?", "用户解禁", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解禁",
          });
        });
    },
    switchStaus(resobj) {
      console.log(resobj);
      if (!resobj.enable) {
        this.$confirm("确定解除该用户禁用状态?", "用户解禁", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning",
        })
          .then(() => {
            changeStatus({
              userCode: resobj.userCode,
              enable: 0,
            }).then(() => {
              resobj.enable = !resobj.enable;
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消解禁",
            });
          });
      } else {
        this.enableDialog = true;
        this.userForbiddenInfo = resobj;
      }
    },
  },
  setup() {
    const state = reactive({
      tableData: [
        {
          // nums: '10086',
          // nickname: 'xu',
          // userId: '01',
          // phone: '911',
          // email: '11100010@163.com',
          // company: '20',
          // logol: '125',
          // store: '1221',
          // creat_date: '2021-12-11 08:12:21',
          // loadTime: '2021-21-22 08:12:11',
          // ipAdd: '192.168.0.1',
          // enable: true
          avatar: "ss",
          disableTime: "2021-04-26 16:13:12",
          email: "chao02@juanli.net",
          enable: "禁用",
          nickname: "陈莉",
          phone: 14723707868,
          realName: "陈莉",
          userId: "84317151464333312",
        },
      ],
      colsData: [
        {
          props: "nums",
          label: "编号",
        },
        {
          props: "uname",
          label: "用户名称",
        },
        {
          props: "u_id",
          label: "用户ID",
        },
        {
          props: "phone_num",
          label: "手机号",
        },
        {
          props: "email",
          label: "邮箱",
        },
        {
          props: "company",
          label: "关联商家",
        },
        {
          props: "logol",
          label: "关联品牌",
        },
        {
          props: "store",
          label: "关联门店",
        },
        {
          props: "creat_date",
          label: "创建日期",
        },
      ],
      options: [
        {
          value: "全部状态",
          label: "全部状态",
        },
        {
          value: "可用",
          label: "可用",
        },
        {
          value: "禁用",
          label: "禁用",
        },
      ],
      userDetailInfo: {},
      userForbiddenInfo: {}, //  禁用用户信息
      total: 1000,
      num: 1,
      size: 10,
      status: true,
      dialogVisible: false,
      businessData: [
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
      ],
      brandData: [
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
      ],
      shopData: [
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
        { name: "xxx商家", inPost: "管理员", associatedDate: "2020-02-11" },
      ],
      input3: "",
      value: "",
      enableDialog: false,
      radio: "",
      isShow: false,
      inputShow: false,
      dayInput: "",
      tipShow: false,
    });
    onMounted(() => {
      getListData();
    });
    const getListData = () => {
      getPageData({ num: state.num, size: state.size }).then((res) => {
        if (res.code === 200) {
          console.log(res.data);
          const { data } = res;
          // console.log(data);
          data.data.forEach((item) => {
            if (item.enable === 1) {
              item.enable = false;
            } else {
              item.enable = true;
            }
          });
          console.log(data);
          state.tableData = data.data;
          state.total = data.total;
        }
      });
    };
    const search = (e) => {
      console.log(e);
    };

    const searchDetail = (val) => {
      console.log(val);
      getUserDetail({ code: val }).then((res) => {
        if (res.code === 200) {
          state.dialogVisible = true;
          state.userDetailInfo = res.data;
        }
      });
    };
    const handleSelectionChange = () => {};
    const handleClose = () => {
      state.dialogVisible = false;
    };
    const choose = (e) => {
      console.log(state.radio);
      if (e === "永久") {
        state.isShow = true;
        state.tipShow = false;
        state.inputShow = false;
        state.dayInput = "";
      }
      if (e === "自定义时间") {
        state.isShow = false;
        state.tipShow = false;
        state.inputShow = true;
      }
    };
    const shuru = (e) => {
      console.log(e.target.innerHTML);
      state.dayInput = e.target.innerHTML;
    };
    const submitForm = () => {
      if (state.radio != "") {
        changeStatus({
          userCode: state.userForbiddenInfo.userCode,
          enable: 1,
          disableDays: state.dayInput,
        }).then((res) => {
          state.userForbiddenInfo.enable = !state.userForbiddenInfo.enable;
          ElMessage({ type: "success", message: "操作成功" });
          state.enableDialog = false;
        });
      } else {
        state.tipShow = true;
      }
    };
    const switchChange = () => {
      state.enableDialog = true;
    };
    const getPageLists = (val) => {
      console.log(val);
      state.num = val;
      getListData();
    };
    const getPageList = (val) => {
      console.log(val);
      state.size = val;
      getListData();
    };

    return {
      ...toRefs(state),
      search,
      handleSelectionChange,
      handleClose,
      searchDetail,
      choose,
      shuru,
      submitForm,
      switchChange,
      getListData,
      getPageList,
      getPageLists,
    };
  },
};
</script>

<style lang="less" scoped>
.user_list {
  height: 100%;
}
.el-icon-s-operation,
.iconxiangqing,
.iconshezhi {
  color: #31c0fd;
  cursor: pointer;
}
.iconfangdajing {
  cursor: pointer;
}
.el-switch {
  // border: 1px solid #409eff;
  // border-radius: 10px;
  /deep/ .el-switch__core {
    background: #fff;
    cursor: pointer;
    &::before {
      content: "禁用";
      color: #b4b4b4;
      position: absolute;
      font-size: 12px;
      transform: scale(0.75);
      left: 14px;
      top: -1px;
    }
  }
  &.switch-is-actived {
    /deep/ .el-switch__core {
      border: 1px solid #31c0fd;
      &::before {
        content: "可用";
        color: #31c0fd;
        position: absolute;
        font-size: 12px;
        transform: scale(0.75);
        left: -1px;
        top: -2px;
      }
    }
    /deep/.el-switch__action {
      left: unset;
      right: 2px;
      background-color: #31c0fd;
    }
  }
}
/deep/.el-switch__action {
  position: absolute;
  left: 2px;
  top: 3px;
  width: 12px;
  height: 12px;
  color: #b4b4b4;
}
/deep/ .el-switch.is-disabled {
  opacity: 1;
}
/deep/.el-dialog {
  position: absolute;
  padding: 10px 30px;
  right: 0;
  height: 100%;
  .el-dialog__footer {
    text-align: left;
  }
  .el-dialog__header {
    border-bottom: 1px solid #ccc;
  }
}
.el-dialog {
  .father {
    display: flex;
    flex-direction: column;
    .top {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 23px;
      display: flex;
      align-items: center;
      & > div {
        line-height: 40px;
        margin-left: 23px;
        & > div {
          & > span {
            margin-left: 30px;
          }
          & > span:nth-child(1) {
            margin-left: 0;
          }
        }
      }
    }
    & > div {
      padding: 5px;
      & > p {
        padding: 5px 10px;
        line-height: 35px;
      }
      & > p::before {
        content: "";
        display: inline-block;
        height: 35px;
        width: 5px;
        background-color: #31c0fd;
        // position: absolute;
        transform: translate(-5px, 12px);
      }
    }
    .first,
    .second,
    .third {
      margin-top: 20px;
    }
  }
  .enableDia {
    & > div {
      margin-top: 20px;
      & > span {
        color: #b4b4b4;
        display: inline-block;
        width: 80px;
        text-align: right;
      }
      & > p {
        line-height: 40px;
        margin-left: 100px;
        color: #b4b4b4;
      }
      &:nth-child(4) {
        i {
          margin-left: 20px;
          input {
            outline: 0;
            height: 20px;
            width: 122px;
          }
          b {
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
      .el-radio-group {
        margin-left: 20px;
      }
    }
  }
}
.red {
  color: #ff0000 !important;
}
.jiejin {
  color: #31c0fd;
  cursor: pointer;
}
</style>
